/**
 * Email:angcyo@126.com
 * @author angcyo
 * @date 2020/10/12
 * 统一修改el-tabs组件样式
 * 在需要使用的地方: @import "../../angcyo/css/el-tabs";
 */

@import "app";

$border-size: 0.12rem;
$translate-border-size: 0.2rem;

.app-tabs {

  /**去掉内容与tabs之间的间距*/
  ::v-deep .el-tabs__header {
    margin: 0;
  }

  /*tabs头部样式*/
  ::v-deep .el-tabs__nav-scroll {
    background-color: $MainDarkBgColor;
    padding-top: 1rem;
  }

  /**tabs项的样式*/
  ::v-deep .el-tabs__nav {
    min-width: 100%;
    $border-active-bg: white;
    $border-style: $LineColor solid $border-size !important;
    $border-style-bg: $border-active-bg solid $border-size !important;
    $border-style-active: $MainColor solid $border-size !important;
    $border-style-none: none !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: $border-style-active;

    > .el-tabs__item {
      margin-left: 1rem;
      border-left: $border-style;
      border-top: $border-style;
      border-right: $border-style;
      border-bottom: $border-style-none;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background-color: $MainDarkBg2Color;
      transition: all 0.3s ease-out;

      &:hover {
        border-left: $border-style-active;
        border-top: $border-style-active;
        border-right: $border-style-active;
        color: $MainColor;
        transform: translateY($translate-border-size);
      }
    }

    .is-active {
      margin-left: 1rem;
      border-left: $border-style-active;
      border-top: $border-style-active;
      border-right: $border-style-active;
      border-bottom: $border-style-bg;
      color: $MainColor;
      background-color: $border-active-bg;
      transform: translateY($translate-border-size);
    }
  }
}
